$transitionTime: .3s;

.nightMode {
  background-color: #111;

  .page-outer-container {
    transition: $transitionTime;
    background-color: #111;
    color: #fff;
  }

  // ***************** 顶部条 *****************
  .top-bar-container {
    transition: $transitionTime;
    border-bottom-color: #233;

    p {
      color: #fff;
    }
  }

  // ***************** 顶部 tab 栏 *****************
  .el-menu.top-menu-can {
    transition: $transitionTime;
    background-color: #233;

    li:hover {
      background-color: rgba(255, 255, 255, .5);
      color: #fff;
    }
  }

  .el-menu--horizontal>.el-menu-item {
    color: #fff;
  }

  .el-menu-item.is-active {
    background-color: transparent;
  }

  .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover {
    background-color: transparent;
  }

  // ***************** left-menu *****************
  .el-menu {
    transition: $transitionTime;
    background-color: #222;
    color: #fff;
    border-right-color: #333;

    .el-menu-item-group__title,
    .el-sub-menu__title,
    .el-menu-item,
    .subtitle>span.detail {
      color: #fff;
    }

    .el-sub-menu__title:hover,
    .el-menu-item:hover,
    .subtitle>span.detail:hover {
      background-color: transparent;
    }

    .el-menu-item:hover,
    .subtitle>span.detail:hover {
      color: orange;
    }

    .el-menu-item.is-active {
      color: orange;
    }
  }

  // ***************** code 相关 *****************
  // main color
  .hljs {
    transition: $transitionTime;
    background-color: #666;
    color: #87CEFA;
  }

  // import color
  .hljs-attr,
  .hljs-doctag,
  .hljs-keyword,
  .hljs-meta .hljs-keyword,
  .hljs-section,
  .hljs-selector-tag {
    color: #EE82EE;
  }

  // string color
  .hljs-link,
  .hljs-regexp,
  .hljs-selector-attr,
  .hljs-string,
  .hljs-symbol,
  .hljs-template-variable,
  .hljs-variable {
    color: #FFC0CB;
  }

  .hljs-built_in,
  .hljs-literal,
  .hljs-title {
    color: orange;
  }

  .hljs-comment {
    color: #00FF00;
  }

  .hljs-name, .hljs-number, .hljs-quote, .hljs-selector-id, .hljs-template-tag, .hljs-type{
    color: #E6E6FA;
  }

  // ***************** warning *****************
  .warning {
    transition: $transitionTime;
    background-color: #FA8072;
    border-color: red;
  }

}